* {
    margin: 0;
    padding: 0;
}
.cell {
    width: 40px;
    height: 40px;
    user-select: none;
    border-left: 2px solid black;
    border-top: 2px solid black;
    border-radius: 4px;
}
.cell.one {
    background-color: lightgreen;
}
.cell.two {
    background-color: lightblue;
}
.cell.three {
    background-color: lightpink;
}
.cell.four {
    background-color: lightyellow;
}
.cell.five {
    background-color: lightsalmon;
}
.cell:last-child {
    border-bottom: 2px solid black;
}
.line {
    float: left;
}

.line:last-child > .cell {
    border-right: 2px solid black;
}

#id-div-map {
    background-color: black;
    display: inline-block;
    box-shadow: 0 0 7px 3px rgba(255, 255, 0, 0.5);
}
#id-div-map.clearfix::after {
    display: block;
    content: '';
    clear: both;
}
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("bg.jpeg");
    /*background-color: black;*/

}

